<template>
  <div id="rose-chart">
    <div class="rose-chart-title">瓷砖质量趋势图</div>
    <dv-charts :option="option" />
  </div>
</template>

<script setup lang="ts" name="RoseChart">
import { ref,toRefs, reactive } from 'vue'
const props = defineProps({
  tileData: {
    type: Object,
    default: {}
  }
})
let { tileData } = toRefs(props)
const dateDetectObj = tileData.value.dateDetectObj

// 初始化数组
const totalTileNumArr = [];
const superNumArr = [];
const firstGradeNumArr = [];
const defectsNumArr = [];

let maxY = 0
// 遍历对象提取数据
for (const key in dateDetectObj) {
  if (dateDetectObj.hasOwnProperty(key)) {
    const dayData = dateDetectObj[key];
    totalTileNumArr.unshift(dayData.totalTileNum);
    superNumArr.unshift(dayData.superNum);
    firstGradeNumArr.unshift(dayData.firstGradeNum);
    defectsNumArr.unshift(dayData.defectsNum);
    maxY = Math.max(maxY, dayData.totalTileNum);
  }
}
// console.log('totalTileNumArr:', totalTileNumArr);
// console.log('superNumArr:', superNumArr);
// console.log('firstGradeNumArr:', firstGradeNumArr);
// console.log('defectsNumArr:', defectsNumArr);
// 获取最近七天的日期
const getLast5Days = () => {
    const days = [];
    const options = { month: 'long', day: 'numeric' };

    for (let i = 5; i >= 0; i--) {
        const date = new Date();
        date.setDate(date.getDate() - i);
        const formattedDate = date.toLocaleDateString('zh-CN', options);
        days.push(formattedDate.replace('月', '月').replace('日', '日'));
    }

    return days;
}
console.log(getLast5Days())
let option = reactive({
  title: {
    text: '瓷砖质量趋势图',
    style: {
      fill: '#fff',
      fontSize: 16
    }
  },
  tooltip: {
    trigger: 'axis' // 触发类型，'axis' 表示悬停时显示该轴上所有数据点的信息
  },
  color: ['#F2F6FC', '#67C23A', '#409EFF', '#F56C6C'],
  legend: {
    data: ['检测瓷砖数', '优等品瓷砖', '一级品瓷砖', '不合格品瓷砖'],
    textStyle: {
      fontFamily: 'Arial',
      fontSize: 13,
      fill: '#fff'
    }
  },
  xAxis: {
    name: '日期',
    data: getLast5Days(),
    nameTextStyle: {
      fill: '#fff',
      fontSize: 14
    },
    axisLabel: {
      style: {
        fill: '#fff',
        fontSize: 12,
        rotate: 0
      }
    }
  },
  yAxis: {
    name: '瓷砖数量',
    data: 'value',
    nameTextStyle: {
      fill: '#fff',
      fontSize: 14
    },
    splitNumber: 6,
    min: 0,
    max: maxY,
    axisLabel: {
      style: {
        fill: '#fff',
        fontSize: 12,
        rotate: 0
      }
    }
  },
  series: [
    {
      name: '检测瓷砖数',
      data: totalTileNumArr,
      type: 'line',
      label: {
        show: true,
        formatter: '{value} 块',
        style: {
          fontSize: 12
        }
      },
      // lineArea: {
      //   show: true
      // },
    },
    {
      name: '优等品瓷砖',
      data: superNumArr,
      type: 'line'
    },
    {
      name: '一级品瓷砖',
      data: firstGradeNumArr,
      type: 'line'
    },
    {
      name: '不合格品瓷砖',
      data: defectsNumArr,
      type: 'line',
      label: {
        show: true,
        formatter: '{value} 块',
        style: {
          fontSize: 12
        }
      },
      lineArea: {
        show: true
      }
    }
  ]
})
</script>

<style scoped>
#rose-chart {
  width: 38%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
}
.rose-chart-title {
  height: 50px;
  font-weight: bold;
  text-indent: 20px;
  font-size: 24px;
  display: flex;
  align-items: center;
}

.dv-charts-container {
  height: calc(100% - 50px);
}
</style>
